<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getFlowerById } from '@/api/detail.js';
import {addToCart} from "@/api/cart.js";
import {ElMessage} from "element-plus";
import {getCartList} from "@/api/cart.js";
import {useCartStore} from "@/stores/cart.js";
const cartStore = useCartStore();
const flowerDetail = ref(null);
const quantity = ref(1); // 默认购买数量

const increase = () => {
  quantity.value++;
};

const decrease = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const fetchFlowerDetail = async () => {
  const route = useRoute();
  const flowerId = route.params.flowerId;
  if (flowerId) {
    const res = await getFlowerById(flowerId);
    flowerDetail.value = res.data;
    console.log(flowerDetail.value);
  }
};
onMounted(() => {
  fetchFlowerDetail();
});
const cartData = ref({
  flowerId: 1,
  quantity: 1,
});
const addCart = async (flowerId) => {
  cartData.value.flowerId = flowerId;
  cartData.value.quantity = quantity.value;
  const res = await addToCart(cartData.value);
  cartStore.cartList=(await getCartList()).data;
  ElMessage.success(res.data);
};
</script>

<template>
<div class="detail-container" v-if="flowerDetail">
  <div class="image-box">
    <img :src="flowerDetail.imageUrl" alt="flower" />
  </div>
  <div class="info-box">
    <h1 class="flower-name">{{ flowerDetail.name }}</h1>
    <div class="category-tag">分类：{{ flowerDetail.category }}</div>
    <p class="flower-desc">{{ flowerDetail.description }}</p>
    <hr />
    <p class="flower-price">价格：<span>¥{{ flowerDetail.price.toFixed(2) }}</span></p>
    <p class="flower-sales">近期销量：{{ flowerDetail.sales }} 件</p>
    <p class="flower-stock">库存：999+</p>
    
    <div class="quantity-box">
      <label>购买数量：</label>
      <button class="qty-btn" @click="decrease">-</button>
      <span class="qty-number">{{ quantity }}</span>
      <button class="qty-btn" @click="increase">+</button>
    </div>
    <button class="buy-button" @click="addCart(flowerDetail.flowerId)">添加购物车</button>
  </div>
</div>
</template>

<style scoped>
.detail-container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 40px 20px;
  max-width: 1000px;
  margin: 20px auto;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.image-box {
  flex: 1 1 320px;
  max-width: 360px;
  border-radius: 12px;
  overflow: hidden;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-box img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  border-radius: 12px;
}

.info-box {
  flex: 1 1 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flower-name {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.category-tag {
  display: inline-block;
  font-size: 14px;
  background-color: #f0f9ff;
  color: #2196f3;
  padding: 4px 12px;
  border-radius: 16px;
  margin-bottom: 16px;
}

hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 16px 0;
}

.flower-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.flower-price {
  font-size: 20px;
  color: #e91e63;
  font-weight: bold;
  margin-bottom: 10px;
}

.flower-price span {
  font-size: 24px;
}

.flower-sales,
.flower-stock {
  font-size: 15px;
  color: #555;
  margin-bottom: 8px;
}

.quantity-box {
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.qty-btn {
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.qty-btn:hover {
  background-color: #1976d2;
}

.qty-number {
  font-size: 16px;
  min-width: 24px;
  text-align: center;
}

.buy-button {
  margin-top: 12px;
  padding: 12px 28px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: fit-content;
}

.buy-button:hover {
  background-color: #1976d2;
}
</style>
